<template>
    <view class="purchaseDetailContainer">
        <!-- 订单我的/预约上门 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'服务中'">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <!-- 订单已完成 -->
            <view class="statusBox" v-if="orderDetail.orderstate == 3">
                <view class="statusTxt">厨师已签到，订单完成</view>
                <view class="tip">
                    <image class="hornIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookOrderDetail/horn.png">
                    </image>
                    <span>如果厨娘还没上门，请致电厨娘号码..</span>
                </view>
                <view class="btns">
                    <view class="button mg">更多</view>
                    <view class="button yellow" @tap="evaluate">评价</view>
                </view>
            </view>
            <!-- 厨娘待付款 -->
            <view class="statusBox" v-if="orderDetail.paystate == 0">
                <view class="statusTxt">未支付，请在<span>15:00</span>内支付</view>
                <view class="attention">

                    逾期未支付订单将会自动取消
                </view>
                <view class="btns">
                    <view class="button mg">更多</view>
                    <view class="button mg"  @tap="agianOrder">再来一单</view>
                    <view class="  red">立即支付￥{{orderDetail.payamount}}</view>
                </view>
            </view>
            <!-- 预约/服务中 -->
            <view class="statusBox" v-if="orderDetail.shippingstate == 1">
                <view class="statusTxt">厨师<span> {{orderDetail.use_time }}</span>上门</view>
                <view class="tip">
                    <image class="hornIcon" src="https://visionmpapi.jiuerjindi.com/upload/mp/cookOrderDetail/horn.png">
                    </image>
                    <span>如果厨娘还没上门，请致电厨娘号码..</span>
                </view>
                <view class="btns">
                    <view class="button mg">更多</view>
                    <view class="button mg" @tap="agianOrder">再来一单</view>
                    <view class="button yellow">致电厨师</view>
                </view>
            </view>
            <view class="personalInfo">
                <view class="addr">
                    <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/bookDetail/addrIcon.png">
                    </image>
                    <view class="center">{{ orderDetail.address }}</view>
					<!--
                    <view class="right">></view>
					-->
                </view>
                <view class="phone">{{ orderDetail.receiver }} {{orderDetail.phone }}</view>
            </view>

            <view class="orderBox">

                <view class="line2">
                    <image class="orderImg" :src="imgDomain + orderDetail.cook_info.avatar">
                    </image>
                    <view class="right">
                        <view class="name">厨娘上门</view>
                        <view class="labels">
							<!--
                            <view class="label">代购费20元</view>
							-->
                            <view class="label">{{ orderDetail.sku_info.goods_sku_text }}</view>
                        </view>
                        <view class="sku">
                            <view class="price">￥<span class="red">{{ orderDetail.payamount }}</span></view>
                            <view class="num">x1</view>
                        </view>
                    </view>
                </view>


                <view class="line5">
                    预约时间：<span>{{ orderDetail.use_time}}</span>

                </view>
            </view>
            <view class="coupon">
                <view class="left">优惠卷</view>
                <view class="right">
                    <view class="r1">#0001</view>
                    <view class="r2">复制</view>
                </view>

            </view>
            <view class="details">
                <view class="detail">
                    <view class="left">订单编号</view>
                    <view class="right">复制<span class="seperate">|</span><span class="grey">256156416541256</span></view>
                </view>
                <view class="detail">
                    <view class="left">下单时间 </view>
                    <view class="right">{{ formatTimestamp(orderDetail.create_at) }}</view>
                </view>
                <view class="detail">
                    <view class="left">如遇缺货</view>
                    <view class="right">缺货时与我电话沟通</view>
                </view>
                <view class="detail">
                    <view class="left">上门时间</view>
                    <view class="right">{{ orderDetail.use_time }}</view>
                </view>
            </view>


        </view>



        <view class="zhanwei"></view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                selectedIndex: 1,
                statusIndex: 0,
                statusArray: [
                    {
                        value: '',
                        text: '全部'
                    },
                    {
                        value: 1,
                        text: '待付款'
                    },
                    {
                        value: 2,
                        text: '服务中'
                    },
                    {
                        value: 3,
                        text: '已完成'
                    }

                ],
                imgDomain: "",

                labels: [
                    {
                        name: '厨艺很好',
                        selected: true
                    },
                    {
                        name: '特别美味',
                        selected: true
                    },
                    {
                        name: '很好吃',
                        selected: false
                    },
                    {
                        name: '特别谦虚',
                        selected: false
                    }



                ],
                propStyles: {

                    iconSrc: "black",
                    // bgColor: '#FECF01',

                },
				// 订单详情
				orderDetail : null,

            };
        },
        computed: {

        },
        methods: {
			getEndPayTime(timestamp){
				
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000 + 15*60 *1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${hours}:${minutes}:${seconds}`;
				
			},
			formatTimestamp(timestamp){
				console.log("->timestamp:"+ timestamp);
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
            changeIndex(index) {
                this.statusIndex = index;
            },
           
            deleteFile(e) {
                console.log(" e.tempFilePath:" + e.tempFile.name);
                // this.formData3.educationImgs.map((item, i) => {
                // 	if (item.name == e.tempFile.name) {
                // 		this.formData.educationImgs.splice(i, 1)
                // 	}
                // })
            },
            // 相关证书
            goBack() {

                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }
            },
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			// 再来一单
			agianOrder(){
				console.log( "=>再来一单" );
				// 预约时间
				uni.setStorageSync('cookTime', this.orderDetail.use_time );
				// 规格
				uni.setStorageSync('currentType', this.orderDetail.use_time);
				// 食材
				//let buy = this.buyList[this.currentBuy] ;
				//uni.setStorageSync('currentBuy',buy);
				// 价格
				uni.setStorageSync('price', this.orderDetail.payamount );
				// 厨师id 
				uni.setStorageSync('cook_id',this.orderDetail.cook_id );
				
				uni.navigateTo({
					url: `/page_bookDetail/bookDetail?id=`+ this.orderDetail.cook_id ,
				})  
			},
			// 评价
			evaluate(){
				uni.navigateTo({
					url: `/page_evaluate/evaluate?id=`+ this.orderDetail.id ,
				}) 
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {

            this.imgDomain = process.env.VUE_APP_BASE_URL;

			this.orderDetail = JSON.parse(option.orderDetailStr);
			console.log("->option.orderDetailStr:"+ option.orderDetailStr);

        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .contentBox {
        width: 100%;

        .statusBox {
            padding: 30rpx;
            background: #FFFFFF;
            margin-bottom: 22rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .statusTxt {
                font-weight: 500;
                font-size: 40rpx;
                color: #333333;
                margin-bottom: 20rpx;

                span {
                    color: #D93F11;
                    font-weight: 500;
                    font-size: 40rpx;
                }
            }

            .attention {
                font-weight: 400;
                margin-bottom: 34rpx;
                font-size: 28rpx;
                color: #333333;
            }

            .tip {
                margin-bottom: 34rpx;
                display: flex;
                align-items: center;

                .hornIcon {
                    width: 42rpx;
                    height: 42rpx;
                    margin-right: 20rpx;
                }

                span {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: rgba(51, 51, 51, 0.6);
                }
            }

            .btns {
                display: flex;
                justify-content: flex-end;

                .button {
                    width: 151rpx;
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: center;
                    background: #FFFFFF;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(51, 51, 51, 0.4);
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #333333;
                }

                .yellow {
                    width: 182rpx;
                    height: 72rpx;
                    background: #FECF01;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(51, 51, 51, 0.4);
                }

                .mg {
                    margin-right: 18rpx;
                }

                .red {
                    width: 346rpx;
                    padding: 0rpx 60rpx;
                    height: 72rpx;
                    background: #D93F11;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: center;
                }
            }
        }

        .personalInfo {
            width: 750rpx;
            height: 216rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 40rpx 30rpx 30rpx;
            margin-bottom: 20rpx;

            .addr {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;

                .icon {
                    width: 50rpx;
                    height: 52rpx;
                }

                .center {
                    width: 550rpx;
                    word-wrap: break-word;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #2E3331;
                    line-height: 45rpx;
                }

                .right {
                    color: rgba(51, 51, 51, 0.6);
                }
            }

            .phone {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }



        .orderBox {
            padding: 26rpx 30rpx 36rpx;
            width: 750rpx;
            margin-bottom: 24rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 20rpx 20rpx 20rpx 20rpx;



            .line2 {
                display: flex;


                .orderImg {
                    width: 208rpx;
                    height: 208rpx;
                    margin-right: 24rpx;
                }

                .right {
                    width: 458rpx;

                    .name {
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                        margin-bottom: 20rpx;
                    }

                    .labels {
                        display: flex;

                        .label {
                            padding: 0rpx 6rpx;
                            height: 34rpx;
                            line-height: 34rpx;
                            background: rgba(51, 51, 51, 0.1);
                            border-radius: 10rpx 10rpx 10rpx 10rpx;
                            margin-right: 12rpx;
                            font-weight: 500;
                            font-size: 16rpx;
                            color: rgba(51, 51, 51, 0.6);
                        }
                    }

                    .sku {
                        width: 458rpx;
                        margin-top: 62rpx;
                        display: flex;
                        justify-content: space-between;

                        .price {
                            font-weight: 500;
                            font-size: 20rpx;
                            color: #333333;

                            span {
                                font-weight: 700;
                                font-size: 28rpx;
                                color: #333333;
                            }

                            .red {
                                color: #D93F11;
                            }
                        }

                        .num {
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #333333;
                        }

                    }
                }
            }

            .line3 {
                width: 100%;
                justify-content: flex-end;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;

                .num {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);
                    margin-right: 22rpx;
                }

                .total {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);

                    span {
                        color: #D93F11;
                        font-size: 28rpx;
                        font-weight: 700;
                    }
                }

            }

            .line4 {
                font-weight: 400;
                font-size: 24rpx;
                color: #D93F11;
                width: 100%;
                justify-content: flex-end;
                display: flex;
                margin-bottom: 20rpx;
            }

            .line5 {
                margin-top: 28rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);

                span {

                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }

            }
        }

        .coupon {
            width: 750rpx;
            height: 90rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 0rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                font-weight: 500;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
            }

            .right {
                display: flex;
                align-items: center;
            }

            .r1 {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                margin-right: 34rpx;
            }

            .r2 {
                font-weight: 500;
                font-size: 24rpx;
                color: #333333;
            }
        }

        .details {
            width: 750rpx;
            height: 336rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            padding: 0rpx 30rpx;
            padding-top: 50rpx;
            margin-top: 20rpx;

            .detail {
                display: flex;
                justify-content: space-between;
                margin-bottom: 48rpx;

                .left {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }

                .right {
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #333333;

                    .grey {
                        font-weight: 400;
                        font-size: 20rpx;
                        color: rgba(51, 51, 51, 0.8);
                    }
                    .seperate{
                        margin: 0rpx 18rpx;
                    }
                }
            }
        }
    }
    .zhanwei{
        width: 750rpx;
        height: 146rpx;
    }
</style>